<template>
	<main>
		<v-headerx></v-headerx>
		<div class="bg">
			<div class="user">
				<img src="../assets/images/pic-default.png" alt="" >
				<p><span @click="change1('登录')"><router-link to="/login">登录</router-link></span><i></i><span @click="change1('注册')"><router-link to="/register">注册</router-link></span></p>
			</div>
		</div>
		<div class="more">
			<div class="more-weak">
				<h4>全部订单</h4>
			</div>
			<ul>
				<li><a href=""><span><i class="iconfont icon-shouyetianchong"></i></span><p>代付款</p></a></li>
				<li><a href=""><span><i class="iconfont icon-hotel"></i></span><p></p>代使用</a></li>
				<li><a href=""><span><i class="iconfont icon-dianying"></i></span><p>代评价</p></a></li>
				<li><a href=""><span><i class="iconfont icon-icon-test"></i></span><p>退款/售后</p></a></li>
			</ul>
		</div>
		<div class="list">
			<ul>
				<li><a href="">我的收藏<span><i class="iconfont icon-jiantou"></i></span></a></li>
				<li><a href="">我的抵用券<span><i class="iconfont icon-jiantou"></i></span></a></li>
				<li><a href="">我的抽奖单<span><i class="iconfont icon-jiantou"></i></span></a></li>
				<li><a href="">积分换礼品<span><i class="iconfont icon-jiantou"></i></span></a></li>
			</ul>
		</div>
	</main>
</template>

<script>
	import headerx from "../components/headerx.vue"

	export default{
		name:"my",
		components:{
			"v-headerx":headerx
		},
		methods:{
			change1(str){
				this.$store.state.title=str;
			}
		},
		mounted(){
			this.$store.state.title="我的";
			this.$store.state.index=4;	
		}
	}
</script>

<style scoped>
	.bg{
		width:100%;
		height: 3rem;
		text-align:center;
		background: #06c1ae;
	}
	.bg .user{
		margin:0 auto;
	}
	.bg .user img{
		width:1.2rem;
		height: 1.2rem;
	    margin-bottom: -.68rem;
	}
	.bg .user p{
		margin-top: .2rem;
	}
	.bg .user a{
		color:white;
		font-size:.4rem;
	}
	.bg .user i::before{
	    content: "|";
	    font-size: .4rem;
	    font-style: normal;
	    color: white;
	    margin: 0 .08rem;
	}
	.more{
		margin-top: .2rem;
		background: white;
		font-size:.4rem
	}
	.more .more-weak{
	    border-bottom: 1px solid #DDD8CE;
	    padding:.2rem;
	}
	.more ul{
		overflow:hidden;
		border-box:border-box;
	}
	.more ul li{
		width:25%;
		float:left;
		text-align:center;
	    padding: .28rem 0;
	}
	.more ul li a{
		color:#333;
		font-size:.4rem;
	}
	.more p{
		margin-top: .1rem;
	}

	.list{
		margin-top: .2rem;
		background: white;
	    border-top: 1px solid rgba(0,0,0,0.4); 

	}
	.list span{
		float:right;
	}
	.list li{
	    box-sizing: border-box;
	    box-shadow: 0 2px 1px #dedede;
	    border-bottom: 1px solid rgba(0,0,0,0.4); 
	    padding: .4rem;
	}
	.list a{
	    color: #000;
	    font-size: .34rem;
	    display:block;	
	}
</style>